@keyframes _0to90 {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(90deg);
        opacity: 0;
    }
}

@keyframes _90to0 {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.rotateShow {
    animation: _90to0 1s Linear;
    animation-fill-mode: forwards;
}

.rotateHide {
    animation: _0to90 1s Linear;
    animation-fill-mode: forwards;
}

@keyframes circle360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

// 360度无限旋转
.rotate360 {
    animation: circle360 4s linear infinite;
}


// 4角带色边框
.box-border {
    position: relative;
    border: 1px solid aqua;
}

// 图标渐变动画
@keyframes identifier {
    0% {
        box-shadow: 0 0 14px #027e949c;
        background: rgba(2, 126, 148, 0.231);
        color: aqua;
    }

    50% {
        box-shadow: 0 0 14px #025e949c;
        background: rgba(2, 99, 148, 0.231);
        color: rgb(10, 143, 226);
    }

    100% {
        box-shadow: 0 0 14px #027e949c;
        background: rgba(2, 126, 148, 0.231);
        color: aqua;
    }
}

.changeColor {
    animation: identifier 2s linear infinite;
}

// 3d旋转
@keyframes rotate360_3d {
    0% {
        transform: rotate3d(1, 1, 1, 0deg);
    }

    50% {
        transform: rotate3d(1, 1, 1, 180deg);
    }

    100% {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}

.animate_rotete360_3d {
    animation: rotate360_3d 2s linear infinite;
}

// 商业险台数 新保 小球的动画
@keyframes irreMovements1 {
    0% {
        left: -172px;
        top: -36px;
    }

    10% {
        left: -172px;
        top: -15px;
    }

    20% {
        left: -155px;
        top: -4px;
    }

    30% {
        left: -129px;
        top: -2px;
    }

    40% {
        left: -113px;
        top: -10px;
    }

    50% {
        left: -113px;
        top: -35px;
    }

    60% {
        left: -123px;
        top: -35px;
    }

    70% {
        left: -140px;
        top: -26px;
    }

    80% {
        left: -153px;
        top: -35px;
    }

    90% {
        left: -164px;
        top: -36px;
    }

    100% {
        left: -172px;
        top: -36px;
    }
}

// 商业险台数 新保 小球的动画class
.animate_irreMovemements1 {
    animation: irreMovements1 4s linear infinite;
}

// 商业险 续保 小球动画
@keyframes irreMovements2 {
    0% {
        left: 60px;
        top: -80px;
    }

    10% {
        left: 50px;
        top: -64px;
    }

    20% {
        left: 45px;
        top: -64px;
    }

    30% {
        left: 36px;
        top: -75px;
    }

    40% {
        left: 29px;
        top: -92px;
    }

    50% {
        left: 45px;
        top: -92px;
    }

    60% {
        left: 66px;
        top: -92px;
    }

    70% {
        left: 66px;
        top: -75px;
    }

    80% {
        left: 81px;
        top: -78px;
    }

    90% {
        left: 67px;
        top: -68px;
    }

    100% {
        left: 60px;
        top: -80px;
    }
}

.animate_irreMovemements2 {
    animation: irreMovements2 4s linear infinite;
}

// 商业险 转保小球动画
@keyframes irreMovements3 {
    0% {
        left: 100px;
        top: 0px;
    }

    10% {
        left: 101px;
        top: -7px;
    }

    20% {
        left: 96px;
        top: -11px;
    }

    30% {
        left: 91px;
        top: -25px;
    }

    40% {
        left: 101px;
        top: -25px;
    }

    50% {}

    60% {}

    70% {}

    80% {}

    90% {}

    100% {
        left: 100px;
        top: 0px;
    }
}

.animate_irreMovemements3 {
    animation: irreMovements3 4s linear infinite;
}

@keyframes irreMovements4 {
    0% {
        left: -120px;
        top: -93px;
    }

    10% {
        left: -110px;
        top: -100px;
    }

    20% {
        left: -102px;
        top: -110px;
    }

    30% {
        left: -110px;
        top: -100px;
    }

    40% {
        left: -110px;
        top: -100px;
    }

    50% {
        left: -120px;
        top: -93px;
    }

    60% {
        left: -120px;
        top: -87px;
    }

    70% {
        left: -110px;
        top: -81px;
    }

    80% {
        left: -113px;
        top: -84px;
    }

    90% {
        left: -115px;
        top: -90px;
    }

    100% {
        left: -120px;
        top: -93px;
    }
}

.animate_irreMovemements4 {
    animation: irreMovements4 4s linear infinite;
}

// 隐藏
@keyframes scalehide {
    0% {
        opacity: 1;
        transform: scale(1);
        display: flex;
    }

    100% {
        opacity: 0;
        transform: scale(0);
        display: none;
    }
}

// 慢慢放大
@keyframes scaleSm {
    0% {
        opacity: 0;
        display: flex;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.animate_scale-hide {
    animation: scalehide 0.5s forwards;
}

.animate_scale-show {
    animation: scaleSm 0.5s forwards;
}